<template>
  <div class="personForm">
    <el-form ref="personForm" :rules="formRules" class="small-space" :model="form" :label-position="'right'"
               >
      <dym-form :editModel="editModel" :componentList="componentList" :formValue.sync="form"
        ></dym-form>
    </el-form>
  </div>
</template>
<script>
  import dymForm from '@/components/element/dymForm'
  import {regExp} from '@/utils/reg'
  export default {
    components: {
      dymForm
    },
    props: {
      form: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data () {
      var validateCellPhone = (rule, value, callback) => {
        if (value) {
          if (!regExp.cellPhone.test(value)) {
              callback(new Error('请输入正确的手机号码'))
          } else {
              callback()
          }
        } else {
            callback()
        }
      }
      var validatePhone = (rule, value, callback) => {
        if (value) {
          if (!regExp.fixedPhone.test(value)) {
              callback(new Error('请输入正确的电话'))
          } else {
              callback()
          }
        } else {
            callback()
        }
      }
      return {
        editModel: 'E',
        componentList: [
          {
            label: '工号',
            prop: 'no', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'no', // 字段显示的值
              disabled: true
          },
          {
            label: '姓名',
            prop: 'name', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'name',
              disabled: true
          },
          {
            label: 'AD域账号',
            prop: 'adUser', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'adUser',
            disabled: true
          },
          {
            label: '登录账号',
            prop: 'loginName', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'loginName',
            disabled: true
          },
          {
            label: '归属机构',
            prop: 'officeName', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'officeName',
              disabled: true
          },
          {
            label: '手机',
            prop: 'mobile', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'mobile'
          },
          {
            label: '电话',
            prop: 'phone', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'phone'
          },
          {
            label: '邮箱',
            prop: 'email', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            cols: [12, 12, 12, 12],
            placeholder: '请输入',
            value: 'email'
          },
          {
            label: '备注',
            prop: 'remarks', // 表单验证传入的值
            labelWidth: '90px',
            componentName: 'el-input',
            type: 'textarea',
            cols: [24, 24, 24, 24],
            placeholder: '请输入',
            value: 'remarks'
          }
        ],
        formRules: {
          mobile: [{ validator: validateCellPhone, trigger: 'blur, change' }],
          phone: [{ validator: validatePhone, trigger: 'blur, change' }]
        }
      }
    },
    created () {
    },
    methods: {
      save () {
        this.$refs['personForm'].validate((valid) => {
          if (valid) {
          console.log(11111)
            this.$emit('submitForm', this.form)
          } else {
            this.error('表单填写错误')
            return false
          }
        })
      }
    }
  }
</script>

<style>
  .personForm {
    width: 70%;
    margin: 40px auto 0;
  }
  .personForm .el-form-item {
    margin-bottom: 20px!important;
  }
</style>
